<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>forgot</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css">
    <script src="../plugins/jquery/jquery.min.js"></script>
    <script src="../plugins/layui/layui.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

</head>
<body>


<section>

    <div class="color"></div>

    <div class="color"></div>

    <div class="color"></div>

    <div class="box">

        <div class="square" style="--i:0;"></div>

        <div class="square" style="--i:1;"></div>

        <div class="square" style="--i:2;"></div>

        <div class="square" style="--i:3;"></div>

        <div class="square" style="--i:4;"></div>

        <div class="container">
            <div class="form">
                <h2>Forgot Form</h2>
                <form role="form">
                    <!-- 手机号 -->

                    <div class="form-group inputBox">
                        <div class="input-group">
                            <div class=" addon input-group-addon"><i class="fas fa-phone-alt"></i></div>
                            <input type="email" class="form-control" placeholder="请输入手机号" id="phonenum">
                        </div>
                    </div>
                    <!-- 手机号/邮箱 -->
                    <div class="form-group inputBox">
                        <label></label>
                        <div class="input-group">
                            <input type="email" class="form-control"  id="inp_code" placeholder="请输入验证码">
                            <span class="input-group-btn">
                            <button type="button" class="btn btn-default login-btn" id="getmsg">获取验证码</button>
                        </span>

                        </div>
                    </div>

                    <label></label>
                    <!-- 登录按钮 -->
                    <button type="button" id="nextstep" class="btn btn-primary login-btn btn-block">下一步</button>

                </form>
            </div>
        </div>

    </div>

</section>


<script>

    $(function () {
        let phone_reg = /^1([3,5,7,8,9,][0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/

        let code

        $("#getmsg").on("click", function () {
            let phonenum = $("#phonenum").val()
            if (phone_reg.test(phonenum)) {
                $.ajax({
                    url:"sendmsg",
                    dataType:"json",
                    data:{
                        phonenum:phonenum
                    },
                    success: function (resp){
                        console.log(resp)
                        if(resp.state){
                            layer.msg('验证码发送成功');
                            code = resp.code
                        }else{
                            layer.msg('发送失败，请稍后重试');
                        }
                    }
                })
            }else{
                layer.msg('电话号码格式不正确', {icon: 5});
            }
        })
        $("#nextstep").on("click",function (){
            let inp_code = $("#inp_code").val()
            if (code == inp_code) {
                $.ajax({
                    url:"savecode-session",
                    dataType:"json",
                    data: {
                        code:code
                    }
                })
                location.href = "recover-password.html"
            }else{
                layer.msg('验证码输入有误', {icon: 5});
            }
        })
    });

</script>
</body>
</html>